import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Radio, message, InputNumber } from 'antd';
import {
  bankSave,
  bankUpdate,
} from '@/api/api'

const Addbank = (props, ref) => {
  const { visible, setVisible, type, bankItem, reload, bankObj,defaultType, imgNum } = props
  console.log(imgNum)
  const [addEditForm] = Form.useForm();
  const [values] = useState({
  })
  
  console.log(values)
  // 添加提交
  const onOk = () => {
    addEditForm.validateFields()
      .then(async values => {
        try {
          let { bankCode, bankName, bankIcon, enabled, sort } = values
          
          let params = {
            bankCode,
            bankName,
            enabled,
            bankIcon,
            sort,
          }
          if (type === 'edit') {
            params.id = bankItem.id
          }
          let interFn = type === 'edit' ? bankUpdate : bankSave;
          let res = await interFn(params)
          if (res.code === 0) {
            message.destroy()
            message.success(type === 'edit' ? '修改成功' : '添加成功')
            addEditForm.resetFields();
            setVisible(false)
            reload()
          }
        } catch (error) {
          console.log(error)
        }
      }).catch(info => {
        console.log('Validate Failed:', info);
      });
  }
  // 监听数据
  useEffect(() => {
    if (type === 'edit') {
      addEditForm.resetFields();
      addEditForm.setFieldsValue({
        'bankName': bankItem.bankName
      })
      addEditForm.setFieldsValue({
        'bankCode': bankItem.bankCode
      })
      addEditForm.setFieldsValue({
        'sort': bankItem.sort
      })
      addEditForm.setFieldsValue({
        'bankIcon': bankItem.bankIcon
      })
      addEditForm.setFieldsValue({
        'enabled': bankItem.enabled
      })
    } else {
      addEditForm.resetFields();
    }
    return () => {};
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type, bankItem, addEditForm])
  return (
    <Modal bankCode={type === 'edit' ? "修改公告" : "新增公告"} visible={visible} onOk={onOk} onCancel={() => {
      setVisible(false)
    }}>
      <div className='addsort-form'>
        <Form
          form={addEditForm}
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 18 }}
          initialValues={values}
          autoComplete="off">
          <Form.Item
            label="银行编码"
            name="bankCode"
            rules={[
              { required: true, message: '请输入银行编码!' },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="银行名称"
            name="bankName"
            rules={[
              { required: true, message: '请输入银行名称!' },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="排序"
            name="sort"
            rules={[
              { required: true, message: '请输入排序!' },
            ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item
            label="银行图标"
            name="bankIcon"
            rules={[
              { required: true, message: '请选择银行图标!' },
            ]}
          >
            <Radio.Group>
            {
              imgNum.map((item: any) => (
                <Radio value={item} key={item}>
                  <img style={{height: '30px','margin':'2px 0'}} src={require(`@/assets/images/bank_image/${item}.png`).default} alt="" />
                </Radio>
              ))
            }
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="是否启用"
            name="enabled"
            rules={[
              { required: true, message: '请选择是否启用!' },
            ]}
          >
            <Radio.Group>
              <Radio value={0}>启用</Radio>
              <Radio value={1}>停用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}
export default Addbank